<script setup lang="ts">
import { ref, unref } from "vue";
import { LogicFlow } from "@logicflow/core";

type nodeListType = {
  text: string;
  class: string;
  type: string;
};

interface Props {
  lf: LogicFlow;
  nodeList: Array<nodeListType>;
}

const props = withDefaults(defineProps<Props>(), {
  lf: null,
  nodeList: null
});

const properties = ref({
  a: "efrwe",
  b: "wewe"
});

const nodeDragNode = item => {
  props.lf.dnd.startDrag({
    type: item.type,
    properties: unref(properties)
  });
};
</script>

<template>
  <!-- 左侧bpmn元素选择器 -->
  <div class="node-panel">
    <div
      class="node-item dark:text-bg_color"
      v-for="item in props.nodeList"
      :key="item.text"
      @mousedown="nodeDragNode(item)"
    >
      <div class="node-item-icon" :class="item.class">
        <div
          v-if="item.type === 'user' || item.type === 'time'"
          class="shape"
        />
      </div>
      <span class="node-label">{{ item.text }}</span>
    </div>
  </div>
</template>

<style scoped>
.node-panel {
  position: absolute;
  top: 10px;
  z-index: 101;
  width: 60px;
  padding: 20px 10px;
  text-align: center;
  background-color: white;
  border-radius: 6px;
  box-shadow: 0 0 10px 1px rgb(228 224 219);
}

.node-item {
  margin-bottom: 20px;
}

.node-item-icon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: 30px;
  background-size: cover;
}

.node-label {
  margin-top: 5px;
  font-size: 12px;
  user-select: none;
}

.node-start {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-rect {
  border: 1px solid black;
}

.node-user {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-time {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-push {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-download {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-click {
  background: url("")
    no-repeat;
  background-size: cover;
}

.node-end {
  background: url("")
    no-repeat;
  background-size: cover;
}

.bpmn-start {
  cursor: grab;
  background: url("")
    center center no-repeat;
}

.bpmn-end {
  cursor: grab;
  background: url("")
    center center no-repeat;
}

.bpmn-user {
  cursor: grab;
  background: url("")
    center center no-repeat;
}

.bpmn-exclusiveGateway {
  cursor: grab;
  background: url("")
    center center no-repeat;
}
</style>
